<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="description" content="Interested in adding textures, lighting, shadows, normal maps, glowing objects, ambient occlusion, reflections, refractions, and more to your 3D game? Great! 3D Game Shaders For Beginners is a collection of shading techniques that will take your game visuals to new heights." />
    <meta property="og:title" content="Building The Demo | 3D Game Shaders For Beginners" />
    <meta property="og:description" content="Interested in adding textures, lighting, shadows, normal maps, glowing objects, ambient occlusion, reflections, refractions, and more to your 3D game? Great! 3D Game Shaders For Beginners is a collection of shading techniques that will take your game visuals to new heights." />
    <meta property="og:image" content="https://i.imgur.com/brdytrF.png" />
    <meta name="twitter:title" content="Building The Demo | 3D Game Shaders For Beginners" />
    <meta name="twitter:description" content="Interested in adding textures, lighting, shadows, normal maps, glowing objects, ambient occlusion, reflections, refractions, and more to your 3D game? Great! 3D Game Shaders For Beginners is a collection of shading techniques that will take your game visuals to new heights." />
    <meta name="twitter:image" content="https://i.imgur.com/brdytrF.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="author" content="David Lettier" />
    <title>Building The Demo | 3D Game Shaders For Beginners</title>
    <style>
      code{white-space: pre-wrap;}
      span.smallcaps{font-variant: small-caps;}
      span.underline{text-decoration: underline;}
      div.column{display: inline-block; vertical-align: top; width: 50%;}
    </style>
    <style>
      code.sourceCode > span { display: inline-block; line-height: 1.25; }
      code.sourceCode > span { color: inherit; text-decoration: inherit; }
      code.sourceCode > span:empty { height: 1.2em; }
      .sourceCode { overflow: visible; }
      code.sourceCode { white-space: pre; position: relative; }
      div.sourceCode { margin: 1em 0; }
      pre.sourceCode { margin: 0; }
      @media screen {
      div.sourceCode { overflow: auto; }
      }
      @media print {
      code.sourceCode { white-space: pre-wrap; }
      code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
      }
      pre.numberSource code
        { counter-reset: source-line 0; }
      pre.numberSource code > span
        { position: relative; left: -4em; counter-increment: source-line; }
      pre.numberSource code > span > a:first-child::before
        { content: counter(source-line);
          position: relative; left: -1em; text-align: right; vertical-align: baseline;
          border: none; display: inline-block;
          -webkit-touch-callout: none; -webkit-user-select: none;
          -khtml-user-select: none; -moz-user-select: none;
          -ms-user-select: none; user-select: none;
          padding: 0 4px; width: 4em;
          background-color: #232629;
          color: #7a7c7d;
        }
      pre.numberSource { margin-left: 3em; border-left: 1px solid #7a7c7d;  padding-left: 4px; }
      div.sourceCode
        { color: #cfcfc2; background-color: #232629; }
      @media screen {
      code.sourceCode > span > a:first-child::before { text-decoration: underline; }
      }
      code span. { color: #cfcfc2; } /* Normal */
      code span.al { color: #95da4c; } /* Alert */
      code span.an { color: #3f8058; } /* Annotation */
      code span.at { color: #2980b9; } /* Attribute */
      code span.bn { color: #f67400; } /* BaseN */
      code span.bu { color: #7f8c8d; } /* BuiltIn */
      code span.cf { color: #fdbc4b; } /* ControlFlow */
      code span.ch { color: #3daee9; } /* Char */
      code span.cn { color: #27aeae; } /* Constant */
      code span.co { color: #7a7c7d; } /* Comment */
      code span.cv { color: #7f8c8d; } /* CommentVar */
      code span.do { color: #a43340; } /* Documentation */
      code span.dt { color: #2980b9; } /* DataType */
      code span.dv { color: #f67400; } /* DecVal */
      code span.er { color: #da4453; } /* Error */
      code span.ex { color: #0099ff; } /* Extension */
      code span.fl { color: #f67400; } /* Float */
      code span.fu { color: #8e44ad; } /* Function */
      code span.im { color: #27ae60; } /* Import */
      code span.in { color: #c45b00; } /* Information */
      code span.kw { color: #cfcfc2; } /* Keyword */
      code span.op { color: #cfcfc2; } /* Operator */
      code span.ot { color: #27ae60; } /* Other */
      code span.pp { color: #27ae60; } /* Preprocessor */
      code span.re { color: #2980b9; } /* RegionMarker */
      code span.sc { color: #3daee9; } /* SpecialChar */
      code span.ss { color: #da4453; } /* SpecialString */
      code span.st { color: #f44f4f; } /* String */
      code span.va { color: #27aeae; } /* Variable */
      code span.vs { color: #da4453; } /* VerbatimString */
      code span.wa { color: #da4453; } /* Warning */
    </style>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
<p><a href="setup.html"><span class="emoji" data-emoji="arrow_backward">◀️</span></a> <a href="index.html"><span class="emoji" data-emoji="arrow_double_up">⏫</span></a> <a href="#"><span class="emoji" data-emoji="arrow_up_small">🔼</span></a> <a href="#copyright"><span class="emoji" data-emoji="arrow_down_small">🔽</span></a> <a href="running-the-demo.html"><span class="emoji" data-emoji="arrow_forward">▶️</span></a></p>
<h1 id="3d-game-shaders-for-beginners">3D Game Shaders For Beginners</h1>
<h2 id="building-the-demo">Building The Demo</h2>
<p><img src="https://i.imgur.com/PQcDnIu.gif" alt="Building The Demo" /></p>
<p>Before you can try out the demo program, you'll have to build the example code first.</p>
<h3 id="dependencies">Dependencies</h3>
<p>Before you can compile the example code, you'll need to install <a href="https://www.panda3d.org/">Panda3D</a> for your platform. Panda3D is available for Linux, Mac, and Windows.</p>
<h3 id="linux">Linux</h3>
<p>Start by <a href="https://www.panda3d.org/manual/?title=Installing_Panda3D_in_Linux">installing</a> the <a href="https://www.panda3d.org/download/sdk-1-10-1/">Panda3D SDK</a> for your distribution.</p>
<p>Make sure to locate where the Panda3D headers and libraries are. The headers and libraries are most likely in <code>/usr/include/panda3d/</code> and <code>/usr/lib/panda3d/</code> respectively.</p>
<p>Next clone this repository and change directory into it.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1"></a><span class="fu">git</span> clone https://github.com/lettier/3d-game-shaders-for-beginners.git</span>
<span id="cb1-2"><a href="#cb1-2"></a><span class="bu">cd</span> 3d-game-shaders-for-beginners/demonstration</span></code></pre></div>
<p>Now compile the source code into an object file.</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1"></a><span class="ex">g++</span> \</span>
<span id="cb2-2"><a href="#cb2-2"></a>  -c src/main.cxx \</span>
<span id="cb2-3"><a href="#cb2-3"></a>  -o 3d-game-shaders-for-beginners.o \</span>
<span id="cb2-4"><a href="#cb2-4"></a>  -std=gnu++11 \</span>
<span id="cb2-5"><a href="#cb2-5"></a>  -O2 \</span>
<span id="cb2-6"><a href="#cb2-6"></a>  -I/usr/include/python2.7/ \</span>
<span id="cb2-7"><a href="#cb2-7"></a>  -I/usr/include/panda3d/</span></code></pre></div>
<p>With the object file created, create the executable by linking the object file to its dependencies.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1"></a><span class="ex">g++</span> \</span>
<span id="cb3-2"><a href="#cb3-2"></a>  3d-game-shaders-for-beginners.o \</span>
<span id="cb3-3"><a href="#cb3-3"></a>  -o 3d-game-shaders-for-beginners \</span>
<span id="cb3-4"><a href="#cb3-4"></a>  -L/usr/lib/panda3d \</span>
<span id="cb3-5"><a href="#cb3-5"></a>  -lp3framework \</span>
<span id="cb3-6"><a href="#cb3-6"></a>  -lpanda \</span>
<span id="cb3-7"><a href="#cb3-7"></a>  -lpandafx \</span>
<span id="cb3-8"><a href="#cb3-8"></a>  -lpandaexpress \</span>
<span id="cb3-9"><a href="#cb3-9"></a>  -lpandaphysics \</span>
<span id="cb3-10"><a href="#cb3-10"></a>  -lp3dtoolconfig \</span>
<span id="cb3-11"><a href="#cb3-11"></a>  -lp3dtool \</span>
<span id="cb3-12"><a href="#cb3-12"></a>  -lp3pystub \</span>
<span id="cb3-13"><a href="#cb3-13"></a>  -lp3direct \</span>
<span id="cb3-14"><a href="#cb3-14"></a>  -lpthread</span></code></pre></div>
<p>For more help, see the <a href="https://www.panda3d.org/manual/?title=How_to_compile_a_C++_Panda3D_program_on_Linux">Panda3D manual</a>.</p>
<h3 id="mac">Mac</h3>
<p>Start by installing the <a href="https://www.panda3d.org/download/sdk-1-10-1/">Panda3D SDK</a> for Mac.</p>
<p>Make sure to locate where the Panda3D headers and libraries are.</p>
<p>Next clone this repository and change directory into it.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb4-1"><a href="#cb4-1"></a><span class="fu">git</span> clone https://github.com/lettier/3d-game-shaders-for-beginners.git</span>
<span id="cb4-2"><a href="#cb4-2"></a><span class="bu">cd</span> 3d-game-shaders-for-beginners</span></code></pre></div>
<p>Now compile the source code into an object file. You'll have to find where the Python 2.7 and Panda3D include directories are.</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a href="#cb5-1"></a><span class="fu">clang</span>++ \</span>
<span id="cb5-2"><a href="#cb5-2"></a>  -c main.cxx \</span>
<span id="cb5-3"><a href="#cb5-3"></a>  -o 3d-game-shaders-for-beginners.o \</span>
<span id="cb5-4"><a href="#cb5-4"></a>  -std=gnu++11 \</span>
<span id="cb5-5"><a href="#cb5-5"></a>  -g \</span>
<span id="cb5-6"><a href="#cb5-6"></a>  -O2 \</span>
<span id="cb5-7"><a href="#cb5-7"></a>  -I/usr/include/python2.7/ \</span>
<span id="cb5-8"><a href="#cb5-8"></a>  -I/Developer/Panda3D/include/</span></code></pre></div>
<p>With the object file created, create the executable by linking the object file to its dependencies. You'll need to track down where the Panda3D libraries are located.</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb6-1"><a href="#cb6-1"></a><span class="fu">clang</span>++ \</span>
<span id="cb6-2"><a href="#cb6-2"></a>  3d-game-shaders-for-beginners.o \</span>
<span id="cb6-3"><a href="#cb6-3"></a>  -o 3d-game-shaders-for-beginners \</span>
<span id="cb6-4"><a href="#cb6-4"></a>  -L/Developer/Panda3D/lib \</span>
<span id="cb6-5"><a href="#cb6-5"></a>  -lp3framework \</span>
<span id="cb6-6"><a href="#cb6-6"></a>  -lpanda \</span>
<span id="cb6-7"><a href="#cb6-7"></a>  -lpandafx \</span>
<span id="cb6-8"><a href="#cb6-8"></a>  -lpandaexpress \</span>
<span id="cb6-9"><a href="#cb6-9"></a>  -lpandaphysics \</span>
<span id="cb6-10"><a href="#cb6-10"></a>  -lp3dtoolconfig \</span>
<span id="cb6-11"><a href="#cb6-11"></a>  -lp3dtool \</span>
<span id="cb6-12"><a href="#cb6-12"></a>  -lp3pystub \</span>
<span id="cb6-13"><a href="#cb6-13"></a>  -lp3direct \</span>
<span id="cb6-14"><a href="#cb6-14"></a>  -lpthread</span></code></pre></div>
<p>For more help, see the <a href="https://www.panda3d.org/manual/?title=How_to_compile_a_C++_Panda3D_program_on_macOS">Panda3D manual</a>.</p>
<h3 id="windows">Windows</h3>
<p>Start by <a href="https://www.panda3d.org/manual/?title=Installing_Panda3D_in_Windows">installing</a> the <a href="https://www.panda3d.org/download/sdk-1-10-1/">Panda3D SDK</a> for Windows.</p>
<p>Make sure to locate where the Panda3D headers and libraries are.</p>
<p>Next clone this repository and change directory into it.</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb7-1"><a href="#cb7-1"></a><span class="fu">git</span> clone https://github.com/lettier/3d-game-shaders-for-beginners.git</span>
<span id="cb7-2"><a href="#cb7-2"></a><span class="bu">cd</span> 3d-game-shaders-for-beginners</span></code></pre></div>
<p>For more help, see the <a href="https://www.panda3d.org/manual/?title=Running_your_Program&amp;language=cxx">Panda3D manual</a>.</p>
<h2 id="copyright">Copyright</h2>
<p>(C) 2019 David Lettier <br> <a href="https://www.lettier.com">lettier.com</a></p>
<p><a href="setup.html"><span class="emoji" data-emoji="arrow_backward">◀️</span></a> <a href="index.html"><span class="emoji" data-emoji="arrow_double_up">⏫</span></a> <a href="#"><span class="emoji" data-emoji="arrow_up_small">🔼</span></a> <a href="#copyright"><span class="emoji" data-emoji="arrow_down_small">🔽</span></a> <a href="running-the-demo.html"><span class="emoji" data-emoji="arrow_forward">▶️</span></a></p>
  </body>
</html>
